import React from 'react'
import { Table, Modal } from 'antd'
import TopHeader, { ListTitle } from '~/components/top-header'
import { formatTime } from '~/utils/utils'
import { OptMap } from '~/constants'

const colums: any = () => [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    render: (createTime: any) => createTime && formatTime(createTime)
  },
  {
    title: '操作',
    dataIndex: 'optType',
    key: 'optType',
    align: 'center',
    render: (optType: any) => OptMap.get(optType)
  },

  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center'
  }
]

const TrajectoryModal = ({ visible, setVisible, listData, record }: any) => {
  console.log('listData=>轨迹', listData, record)
  const { caseNo, caseName, serialNo, itemName, itemStock, feature, specs } = record
  const onCancel = () => {
    setVisible(false)
  }
  const data = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen: [
        { label: '物品编号:', value: serialNo },
        { label: '物品名称:', value: itemName }
      ]
    },
    {
      childen: [
        { label: '数量:', value: `${itemStock?.totalNumber}${itemStock?.unitName}` },
        { label: '规格:', value: specs }
      ]
    },
    {
      childen: [
        { label: '特征:', value: feature },
        { label: '物品来源:', value: '' }
      ]
    }
  ]

  return (
    <div>
      <Modal width="80%" title="物品轨迹" footer={null} visible={visible} onCancel={onCancel}>
        <TopHeader isHideTitle headData={data} />
        <ListTitle title="轨迹列表" />
        <Table
          pagination={{
            size: 'default',
            total: listData.length,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total => `共 ${total} 条`
          }}
          style={{ marginTop: 30 }}
          bordered
          columns={colums()}
          dataSource={listData}
        />
      </Modal>
    </div>
  )
}

export default TrajectoryModal
